<template>
  <view>
    <!-- #ifndef MP-WEIXIN-->
    <my-navbar leftText="领券中心" @leftClick="back"></my-navbar>
    <!-- #endif -->
    <view class="content">
      <view
        :class="
          item.status == 2
            ? 'copon_box copon_used flex-btw'
            : 'copon_box copon flex-btw'
        "
        v-for="(item, index) in list"
        :key="index"
      >
        <view class="left flex-center">{{
          item.type == 1 ? "普通券" : "现金券"
        }}</view>
        <view class="center flex-btw">
          <view class="center_left">
            <view class="price">￥{{ item.money }}</view>
            <view class="info" @click="alertInfo(item.describe)">
              <u-icon name="question-circle"></u-icon>
              <text class="info_text">使用说明</text>
            </view>
          </view>
          <view class="center_right">
            <view v-if="item.type == 1" class="rule"
              >满{{ item.order_money_limit }}使用</view
            >
            <view v-else-if="item.type == 2" class="rule">无门槛</view>
            <view class="limit" v-if="item.get_limit"
              >每位用户限制{{ item.get_num }}张</view
            >
            <view class="limit" v-else>不限量</view>
            <view class="time" v-if="item.expire_type == 1">
              {{ parseTime(item.start_time) }}~{{ parseTime(item.end_time) }}
            </view>
            <view class="time" v-else-if="item.expire_type == 2"
              >限{{ item.expire_days }}天内使用</view
            >
          </view>
        </view>
        <!-- 0未领取，1已领取，2已领完 -->
        <view v-if="item.status == 1" class="right" @click="toClassify"
          >去使用</view
        >
        <view v-else-if="item.status == 2" class="right">已领完</view>
        <view v-else class="right" @click="getCoupon(item.id)">立即领取</view>
      </view>

      <view v-if="nodata" class="nodata-box">
        <image
          class="nodata-pic"
          src="../../../static/image/nodata.png"
        ></image>
        <view class="nodata-txt">暂无优惠券可领取</view>
      </view>
    </view>
    <u-modal
      v-model="info.show"
      :content="info.value"
      title="使用说明"
      confirm-color="#4FA388"
    ></u-modal>
  </view>
</template>

<script>
import { $https } from "@/static/js/request.js";
export default {
  data() {
    return {
      page: 1,
      count: 0,
      list: [],
      info: {
        value: "",
        show: false,
      },
      nodata: false,
    };
  },
  onLoad() {
    this.getData(1);
  },
  methods: {
    getData(page) {
      var params = {
        size: 20,
        page,
      };
      $https("GET", "getCouponsList", params, (res) => {
        if (res.data.errcode == 0) {
          this.page = page;
          if (page == 1) {
            if (res.data.data.list.length == 0) {
              this.nodata = true;
            } else {
              this.list = res.data.data.list;
              this.nodata = false;
            }
          } else {
            let oldData = this.list;
            this.list = oldData.concat(res.data.data.list);
          }
          this.count = res.data.data.count;
        } else {
          uni.showToast({
            title: res.data.errmsg,
            icon: "none",
          });
        }
      });
    },
    getCoupon(id) {
      $https(
        "GET",
        "getCoupons",
        {
          id,
        },
        (res) => {
          if (res.data.errcode == 0) {
            uni.showToast({
              title: "领取成功！",
              success: () => {
                setTimeout(() => {
                  this.getData(1);
                }, 1500);
              },
            });
          } else {
            uni.showToast({
              title: res.data.errmsg,
              icon: "none",
            });
          }
        }
      );
    },
    alertInfo(info) {
      this.info.value = info;
      this.info.show = true;
    },
    parseTime(time) {
      time = time * 1000;
      var date = new Date(time);
      var year = date.getFullYear(),
        month =
          date.getMonth() + 1 < 9
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1,
        day = date.getDate() < 9 ? "0" + date.getDate() : date.getDate();
      return `${year}-${month}-${day}`;
    },
    toClassify() {
      uni.switchTab({
        url: "/pages/tabar/classify",
      });
    },
    back() {
      // #ifdef H5
      window.history.back(-1);
      // #endif
      // #ifndef H5
      uni.navigateBack();
      // #endif
    },
  },
  onReachBottom() {
    if (this.list.length < this.count) {
      this.page++;
      this.getData(this.page);
    }
  },
};
</script>

<style lang="scss">
.content {
  padding: 44rpx 56rpx 150rpx;
}

.copon_box {
  width: 638rpx;
  height: 164rpx;
  background: url(../../../static/image/coupon.png) no-repeat;
  background-size: 100% 100%;
  padding: 0 30rpx;
  margin-bottom: 20rpx;

  .left {
    min-height: 150rpx;
    width: 40rpx;
    word-wrap: wrap;
    font-size: 28rpx;
    line-height: 35rpx;
    border-radius: 4rpx;
    text-align: center;
    padding: 10rpx 0;
    transform: scale(0.8);
  }

  .right {
    width: 40rpx;
    word-wrap: wrap;
    font-size: 22rpx;
    line-height: 26rpx;
    border: 1px solid #fff;
    border-radius: 6rpx;
    text-align: center;
    padding: 10rpx 0;
    margin-left: 40rpx;
  }

  .center {
    flex: 1;

    .center_left {
      text-align: center;
      width: 50%;

      .price {
        font-size: 40rpx;
        font-weight: bold;
      }

      .info {
        color: #a4a4a4;
        font-size: 16rpx;

        .info_text {
          text-decoration: underline;
          margin-left: 4rpx;
        }
      }
    }

    .center_right {
      text-align: center;
      width: 50%;

      .rule {
        font-size: 24rpx;
      }

      .limit {
        font-size: 20rpx;
        // #ifndef MP-WEIXIN
        transform: scale(0.8);
        // #endif
      }

      .time {
        font-size: 20rpx;
        border-radius: 16rpx;
        padding: 4rpx;
        // #ifndef MP-WEIXIN
        transform: scale(0.7);
        line-height: 22rpx;
        // #endif
        // #ifdef MP-WEIXIN
        transform: scale(0.9);
        // #endif
      }
    }
  }

  &.copon {
    .left {
      background: #f6d32d;
      color: #c6272a;
    }

    .right {
      color: #f6d32d;
      border-color: #f6d32d;
    }

    .center_left {
      .price {
        color: #c6272a;
      }
    }

    .center_right {
      color: #757575;

      .rule {
        color: #191919;
      }

      .time {
        background: #e9adae;
      }
    }
  }

  &.copon_used {
    background: url(../../../static/image/coupon_used.png) no-repeat;
    background-size: 100% 100%;

    .left,
    .right {
      background: #cccccc;
      color: #787878;
      border-color: #b3b3b3;
    }

    .center_left {
      .price {
        color: #cccccc;
      }
    }

    .center_right {
      color: #cccccc;

      .rule {
        color: #cccccc;
      }

      .time {
        background: #ececec;
      }
    }
  }
}

.nodata-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 40rpx;
}

.nodata-pic {
  width: 400rpx;
  height: 300rpx;
}

.nodata-txt {
  text-align: center;
  font-size: 32rpx;
  color: #666666;
  padding-top: 30rpx;
}
</style>
